<template>
    <div id="mobile-tabbar" class="tabbar-box" :style="{height:isHavesafeArea?'5.25rem':'4rem',paddingBottom:isHavesafeArea?'1.25rem':'0rem'}">
    <div v-for="(item,index) in tabBarList" :key="index" class="tabbar-item" :class="[getRouterPath==item.path&&'tabbar-active']"
      @tap.stop @click="tabBarClick(item)">
      <svg class="knowledge-svg-icon" aria-hidden="true">
        <use v-bind:xlink:href="`#${getRouterPath==item.path?item.iconSelect:item.icon}`"></use>
      </svg>
      <div class="tabbar-name">
        <span>{{$t(item.label)}}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance,
  computed
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { useRoute, useRouter } from "vue-router"
const router = useRouter();
const route = useRoute()
const emit = defineEmits([""])
const props = defineProps({

})

const getRouterPath = computed(()=>{
  return route.path
})

const isHavesafeArea = ref(false)
const userAgent = ref('')
const tabBarList = ref([
  {label:'message.mobile.recently',path:'/mobile/index',icon:'keowledge-mobile-zuijin-weixuanzhong',iconSelect:'keowledge-mobile-zuijin-xuanzhong'},
  {label:'message.text.library',path:'/mobile/knowledge',icon:'keowledge-mobile-wenku-weixuanzhong',iconSelect:'keowledge-mobile-a-wenku-xuanzhong2'},
  {label:'message.silder.collect',path:'/mobile/collect',icon:'keowledge-mobile-shoucang-weixuanzhong',iconSelect:'keowledge-mobile-shoucang-xuanzhong'},
  {label:'message.mobileRouter.mine',path:'/mobile/mine',icon:'keowledge-mobile-wode-weixuanzhong',iconSelect:'keowledge-mobile-wode-xuanzhong'}
])

onMounted(()=>{
  userAgent.value  = navigator.userAgent
  let isiOS = !!userAgent.value.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
  if(isiOS && userAgent.value.toLowerCase().match(/MicroMessenger/i) == 'micromessenger') {
    isHavesafeArea.value = true
  }else{
    isHavesafeArea.value = false
  }
})

function tabBarClick(item){
  if(getRouterPath.value==item.path) return
  router.push(item.path)
}

</script>
<style lang="scss" scoped>
.tabbar-box{
  position: fixed;
  bottom:0rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #fff;
  border-top: 1px solid #EEEFF0;
  .tabbar-item{
    width: 1.625rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .knowledge-svg-icon{
      width: 1.375rem;
      height: 1.375rem;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
    img{
      height: 1.375rem;
      width: 1.375rem;
    }
    font-size: .75rem;
    color: #6F7588;
    .tabbar-name{
      min-width: 1.625rem;
      font-size: .75rem;
      margin-top: .125rem;
      @include SourceHanSansCN-Regular;
      // margin-top: .25rem;
    }
  }
  .tabbar-active{
    color: #1E6FFF;
  }
}
</style>